<template>
	<view class="">
		<view style="width: 100%;padding: 0 30upx;">
			<image :src="topicList_top" style="width: 100%;" mode="widthFix"></image>
			<!-- <view style="height: 100upx;line-height: 100upx;">
				<image src="../../static/01.png" style="width: 60upx;height: 60upx;vertical-align: middle;margin-left: 20upx;" mode=""></image>
				<text style="margin: 0upx 30upx;">生物伞MAGICALAB</text>
				<image src="../../static/vip.png" style="width: 30upx;height: 30upx;vertical-align: middle;" mode=""></image>
			</view> -->
		</view>
		<view v-if="line == 1">
			<view class="d-header">
				<text>美丽分享</text>
			</view>
			<view class="guess-section">
				<view 
					v-for="(item, index) in topicList" :key="index"
					class="guess-item"
				>
					<view class="image-wrapper" @click="navToDetailPage(item.id)">
						<image :src="item.label_thumb" mode="aspectFill"></image>
					</view>
					<view class="" style="height:100upx;margin-top: 10upx;">
						<view class="" style="display: flex;">
							<!-- <image style="width: 50upx;height:50upx;" src="../../static/01.png" mode=""></image> -->
							<text style="margin-top: 10upx;font-size: 32upx;" class="price">{{item.label_name}}</text>
						</view>
						<view style="display: flex;justify-content: space-between;margin: 20upx 0 40upx;">
							<text style="line-height: 50upx;" class="price">{{item.create_time.substring(0,10)}}</text>
							<view>
								<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode=""></image>
								<text style="line-height: 50upx;margin-left: 20upx;" class="price">{{item.is_recommend}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 右侧固定分享按钮 -->
		<button style="
		margin: 0;padding: 0;border: 1px solid transparent;outline: none;
		position: fixed;top: 560upx;right: 20upx;width: 100upx;height: 180upx;z-index: 2;border: 1upx solid #eeeeee;background-color: #fff;box-shadow: 10upx -5upx 20upx #CCCCCC;border-radius: 5upx;word-wrap: break-word;"
		@click="chg_line"
			>
			<view>
				<image src="../../static/pailie1.png" style="width: 60upx;height: 60upx;margin: 20upx 20upx 0;"></image>
				<view style="height: 66upx;line-height: 33upx;font-size: 25upx;text-align: center;border-top: 1upx solid #cccccc;margin: 0upx 15upx 0;color: #888;padding-top: 10upx;" v-if="line == 1">一列展示</view>
				<view style="height: 66upx;line-height: 33upx;font-size: 25upx;text-align: center;border-top: 1upx solid #cccccc;margin: 0upx 15upx 0;color: #888;padding-top: 10upx;" v-if="line == 2">两列展示</view>
			</view>
		</button>
		
		<view v-if="line == 2">
			<view class="d-header">
				<text>美丽分享</text>
			</view>
			<view style="width: 100%;padding: 0 30upx;" v-for="(item, index) in topicList" :key="index">
				<image :src="item.label_thumb" style="width: 100%;" mode="widthFix" @click="navToDetailPage(item.id)"></image>
				<view class="" style="display: flex;">
					<!-- <image style="width: 50upx;height:50upx;" src="../../static/01.png" mode=""></image> -->
					<text style="margin-top: 10upx;font-size: 32upx;" class="price">{{item.label_name}}</text>
				</view>
				<view style="display: flex;justify-content: space-between;margin: 20upx 0;">
					<text style="line-height: 50upx;" class="price">{{item.create_time.substring(0,10)}}</text>
					<view>
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode=""></image>
						<text style="line-height: 50upx;margin-left: 20upx;" class="price">{{item.is_recommend}}</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data () {
			return{
				res:[],
				user_id:'',
				topicList_top:'', // 第一张话题列表
				topicList:[],
				line:2,
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page: 1,
				timer:{},
			};
		},
		onLoad:function(){
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
			this.setAjax()
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadingType = 0;//将loadingType归0重置
			let o = this
			setTimeout(function () {
				o.setAjax();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 上拉加载
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
		methods:{
			chg_line () {
				if (this.line == 1) {
					this.line = 2
					return
				}
				if (this.line == 2) {
					this.line = 1
					return
				}
				// this.getlist()
			},
			setAjax(){
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Label/map',
					method: 'POST',
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					// header:{'Content-Type':'form-data'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						this.topicList_top = res.data.data.images
						this.topicList_top = 'https://cx.mingmeijt.com' + this.topicList_top
					}
				});
				this.getlist()
			},
			getlist() {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Label/index?p=1',
					method: 'POST',
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					// header:{'Content-Type':'form-data'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						let tpcList = res.data.data.list
						for(var i=0; i<tpcList.length; i++) {
							tpcList[i].label_thumb = 'https://cx.mingmeijt.com' + tpcList[i].label_thumb
						}
						this.topicList = tpcList
					}
				});
			},
			getmorenews() {
				let o = this
				this.page++;//每触底一次 page +1
				// console.log(this.page)
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/Label/index?p=' + this.page,
					method: 'POST',
					data: {
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if (res.data.data.list == '' || res.data.data.list == null) {//没有数据
							o.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var tpcList = res.data.data.list
						for(var i=0; i<tpcList.length; i++) {
							tpcList[i].label_thumb = 'https://cx.mingmeijt.com' + tpcList[i].label_thumb
						}
						o.topicList = o.topicList.concat(tpcList);//将数据拼接在一起
						o.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			jump(e){
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno(){
				uni.showModal({
				title:'提示',
				content:'功能暂未开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			navToDetailPage(id) {
				uni.navigateTo({
					url: '/pages/topic/article?article=' + id
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.d-header{
		margin: 20upx 0 15upx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80upx;
		font-size: $font-base + 8upx;
		color: $font-color-dark;
		position: relative;
			
		text{
			padding: 0 20upx;
			background: #fff;
			position: relative;
			z-index: 1;
		}
		&:after{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 600upx;
			height: 0;
			content: '';
			border-bottom: 1px solid #ccc;
		}
	}
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg - 4upx;
			color: #000000;
			line-height: 1;
		}
	}
</style>
